<template>
    <div class="wrapper">
        <mt-header :title="`${userInfo && userInfo.loginPassword=='1'?'设置':'修改'}登入密码`" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
            <mt-button slot="right" @click="$router.back(-1)">
                <i class="icon iconfont icon-guanbi"></i>
            </mt-button>
        </mt-header>
        <div class="blank">密码可使用字母、数字、字符组合，限8-20位</div>
        <div v-if="userInfo && userInfo.loginPassword=='1'">
            <div class="list">
                <inputPwd tips="输入密码" @sendPwdToParent="getPwdFromChild"></inputPwd>
                <inputPwd tips="重新输入密码" @sendPwdToParent="getPwdFromChildAgain"></inputPwd>
            </div>
            <div class="default-btn">
                <mt-button type="primary" size="large" :disabled="(inputValuePwd&&inputValuePwdAgain)?false:true" @click.native="editLoginPwd">完成</mt-button>
            </div>
        </div>
        <div v-else>
            <div class="list">
                <inputPwd tips="原登入密码" @sendPwdToParent="getOldPwdFromChild"></inputPwd>
                <inputPwd tips="输入新密码" @sendPwdToParent="getPwdFromChild"></inputPwd>
                <inputPwd tips="重新输入新密码" @sendPwdToParent="getPwdFromChildAgain"></inputPwd>
            </div>
            <div class="default-btn">
                <mt-button type="primary" size="large" :disabled="(inputValuePwd&&inputValuePwdAgain&&inputValueOldPwd)?false:true" @click.native="editLoginPwd">完成</mt-button>
            </div>
            <div class="forget" @click="changeToFindPwd">忘记密码</div>
        </div>
    </div>
</template>

<script>
import inputPwd from "@/components/InputPwd"
import { Toast } from 'mint-ui';
import { mapGetters } from 'vuex'
export default {
    data: function () {
        return {
            inputValuePwd:'',
            inputValuePwdAgain:'',
            inputValueOldPwd:'',
        }
    },
    components:{
        inputPwd
    },
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    methods: {
        getOldPwdFromChild(value){
            this.inputValueOldPwd = value;
        },
        getPwdFromChild(value){
            this.inputValuePwd = value;
        },
        getPwdFromChildAgain(value){
            this.inputValuePwdAgain = value;
        },
        editLoginPwd(){
            if( this.inputValuePwdAgain == this.inputValuePwd ){
              var data = {}
              if( this.userInfo && this.userInfo.loginPassword=='1' ){
                  // 未设置
                  data = {
                      "loginPassword":this.inputValuePwd
                  }
              }else{
                  // 已设置
                  data = {
                      "loginPasswordOld":this.inputValueOldPwd,
                      "loginPassword":this.inputValuePwd
                  }
              }
              this.$store.dispatch('UpdateInfo',data).then((res) => {
                  if( res.code == 200 ){
                      Toast({
                          message: "已设置",
                          iconClass: 'icon iconfont icon-ic_check'
                      })
                      this.$router.push('/account/setting');
                  }else{
                      Toast({
                          message: res.msg,
                          iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                      });
                  }
              })
          }else if( this.inputValueOldPwd == this.inputValuePwd ){
              Toast({
                  message: '新密码与原密码不能相同'
              });
          }else{
              Toast({
                  message: '重复输入密码不一致'
              });
          }
        },
        changeToFindPwd(){   //跳转到找回密码页面
            this.$router.push({
                name:'findpwd',
                params:{
                    from:'editLoginPwd'
                }
            });
        },
    },
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .blank{
        height:44px;
        background:rgba(242,243,249,1);
        font-size:13px;
        color:#bfbfbf;
        line-height 44px;
        text-align:center;
    }
    .forget{
        padding:0 15px;
        margin-top:10px;
        font-size:12px;
        color:#004EA2;
    }
    .tips{
        color: red;
    }
}
</style>
